<template>
  <div>
    <el-card>
      <div class="coll_title">产品分类</div>
      <div class="mag_t-10">
        <el-form :model="SearcOrder" label-width="auto">
          <div class="wh_f">
            <div class="flex_1">
              <el-form-item label="分类 :">
                <el-select v-model="SearcOrder.type" placeholder="请选择产品分类">
                  <el-option v-for="(item,index) in vuex.shopClsssList.value" :key="index"
                             :label="item.name" :value="String(item.id)" />
                </el-select>
              </el-form-item>
            </div>
            <div class="flex_1">
              <el-form-item class="mag_l-10" label="上架状态 :">
                <el-select v-model="SearcOrder.is_show" placeholder="请选择上架状态">
                  <el-option label="上架" value="1" />
                  <el-option label="下架" value="0" />
                </el-select>
              </el-form-item>
            </div>
            <div class="flex_1">
              <el-form-item class="mag_l-10" label="产品名称 :">
                <el-input v-model="SearcOrder.name"  placeholder="请输入产品名称"/>
              </el-form-item>
            </div>
            <div class="flex_2">
              <el-button @click="getList" class="mag_l-30" type="primary">查询</el-button>
              <el-button @click="Clear" type="primary">重置</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </el-card>
<!--    列表数据-->
    <el-card shadow="always" class="mag_t-20">
      <el-button type="primary" @click="addData({},'新增')">新增分类</el-button>
      <div class="coll_title mag_t-20">产品列表</div>
      <div>
        <el-table :data="list" :border="true">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="ID" width="50" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="title_name" label="分类" />
          <el-table-column prop="age" label="价格" />
          <el-table-column prop="addmoney" label="进货价" />
          <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.is_show==1?'success':'danger'">
              <span v-if="scope.row.is_show==1">上架</span>
              <span v-if="scope.row.is_show==0">下架</span>
            </el-tag>
          </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template #default="scope">
              <el-button type="primary" @click="addData(scope.row,'预览')">查看</el-button>
              <el-button type="primary" @click="addData(scope.row,'编辑')">编辑</el-button>
              <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="确定删除产品吗?"
                  @confirm="deleteData(scope.row)"
              >
<!--                @cancel="cancelEvent"-->
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="demo-pagination-block pad_t_20">
          <el-pagination
              v-model:current-page="page"
              v-model:page-size="limit"
              :page-sizes="[10, 20, 30, 100]"
              :size="size"
              :disabled="disabled"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <el-dialog
        v-model="isShow"
        :title="title"
        width="800"
        align-center
    >
      <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="名称 :">
            <el-input :disabled="title=='预览'" v-model="form.name" placeholder="产品名称" />
          </el-form-item>
          <el-form-item label="分类 :">
            <el-select :disabled="title=='预览'" v-model="form.type" placeholder="选择分类">
              <el-option v-for="(item,index) in shop_class" :key="index"  :label="item.name" :value="String(item.id)" />
            </el-select>
          </el-form-item>
          <el-form-item label="价格 :">
            <el-input type="number" :disabled="title=='预览'" v-model="form.age"  placeholder="产品价格"/>
          </el-form-item>
          <el-form-item label="进价 :">
            <el-input type="number" :disabled="title=='预览'" v-model="form.addmoney"  placeholder="产品进货价"/>
          </el-form-item>
          <el-form-item v-if="title!=='新增'" label="所属商铺 :" >
            <el-input v-model="form.shop_id" disabled />
          </el-form-item>
          <el-form-item label="上架状态 :">
            <el-switch :disabled="title=='预览'"
                v-model="form.is_show"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                :active-value="1"
                :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="isOk">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import {shop_type} from "@/api";

onMounted(() => {
  getList();
});
// 引用状态存储
import { storeVuex } from "@/store/modules/user";
import {storeToRefs} from "pinia";
const vuex = storeToRefs(storeVuex())
import {ElMessage} from "element-plus";

let isShow = ref(false)
let title = ref()
// 表单数据
let form = ref()
// 新增 编辑按钮事件
const addData = (e:any,tit:String)=>{
  form.value = JSON.parse(JSON.stringify(e))
  if(tit=='新增'){
    form.value = {
      is_show:1,
    }
  }
  isShow.value = true
  title.value = tit
}
// 查询数据
const selectData = async (e:any,tit:String)=>{
  const res:any = await shop_type.getShop_type({
    id:e,
    shop_id:vuex.userType_id.value
  })
  if(res.data.status==1){
    form = res.data.data.data[0]
    isShow.value = true
    title.value = tit
  }

}
const isOk = async ()=>{
  if(title.value=="编辑"){
    var {id,name,type,age,is_show,addmoney} = form.value;
    console.log(form.value)
    let res:any = await shop_type.updaShop_type({id, name,type, age, is_show,addmoney})
    ElMessage({
      message: '修改成功!',
      type: 'success',
    })
    // 新增
  }else{
    var {name,type,age,is_show,addmoney} = form.value;
    const res:any = await shop_type.addShop_type({
      name:name,
      type:type,
      age:age,
      addmoney:addmoney,
      shop_id:vuex.userType_id.value,
      is_show:is_show
    })
    ElMessage({
      message: '新增成功!',
      type: 'success',
    })
  }
  await getList()
  isShow.value = false
}
// 删除
const deleteData = async (e:any)=>{
  const res= await shop_type.deleteShop_type({id:e.id})
  ElMessage({
    message: res.data.msg,
      type: res.data.status==1?'success':'error'
  })
  await getList()
}

// 搜索条件数据
let SearcOrder = reactive({
  is_show:null,
  name:null
})

// 清除搜索条件
const Clear = ()=>{
  SearcOrder.type = null
  SearcOrder.is_show = null
  SearcOrder.name = null
}
// 分页请求封装updaShop_type
let list = ref()
let shop_class = reactive([])

let page = ref(1)
let limit = ref(10)
let count = ref()

const getList = async ()=>{
  const res:any = await shop_type.getShop_type({
    limit:limit.value,
    page:page.value,
    shop_id:vuex.userType_id.value,
    is_show:SearcOrder.is_show?SearcOrder.is_show:null,
    name:SearcOrder.name?SearcOrder.name:null,
    // @ts-ignore
    type:SearcOrder.type?SearcOrder.type:null
  })
  list.value = res.data.data.data
  page.value = res.data.data.page
  limit.value = res.data.data.limit
  count.value = res.data.data.count
  getShopClass()
}
// 查询产品分类
const getShopClass = async ()=>{
  const res:any = await shop_type.getShop_class({
    shop_id:vuex.userType_id.value
  })
  console.log('产品分类',res.data.data.data)
  shop_class = res.data.data.data
}
const handleSizeChange = async ()=>{
  getList();
}
const handleCurrentChange = async ()=>{
  getList();
}
</script>
<style scoped>

</style>
